<template>
  <div>
    <Row>
      <Card>
        <VmBtable type="edit" ref="vmTbale"
                  :columns="dataColumns"
                  :data="dataTable"
                  :searchparam="searchParam"
                  :fixedHeight="true"
                  :cutHeight="100"
                  :importBtn="false"
                  :downTemplate="false"
                  :exportBtn="false"
                  :searchBtn="false"
                  :batchDelBtn="false"
                  :addBtn="true"
                  :operate="operate"
                  :pageControl="false"
                  searchText="关键字："
                  cleanText="刷新"
                  addText="增加顶级菜单"
                  v-on:search-change="searchFn"
                  v-on:page-change="pageChangeFn"
                  v-on:restFn="restFn"
                  v-on:addFn="addModal"
                  v-on:batchDelete="batchDelete"
                  v-on:on-expand-tree="onExpandTree"
        >
        </VmBtable>
      </Card>
    </Row>
    <Modal v-model="modal.visible" :title="modal.title" v-on:on-ok="submitForm" :mask-closable="false"
           width="600" v-on:on-cancel="cancelForm">
      <Form ref="modalForm" :model="modal.form" :label-width="100" label-position="right" :rules="modal.rules">
        <FormItem label="title" prop="title">
          <Input v-model="modal.form.title" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="path" prop="path">
          <Input v-model="modal.form.path" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="icon" prop="icon">
          <Input v-model="modal.form.icon" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <!--        <FormItem label="level" prop="level">-->
        <!--          <Input v-model="modal.form.level" placeholder="请输入..." clearable style="width:90%"/>-->
        <!--        </FormItem>-->
        <FormItem label="ord" prop="ord">
          <InputNumber v-model="modal.form.ord" placeholder="0" clearable style="width:90%"/>
        </FormItem>
        <FormItem label="fixed" prop="fixed">
          <Input v-model="modal.form.fixed" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
<!--        <FormItem label="permission" prop="permission">-->
<!--&lt;!&ndash;          <Input v-model="modal.form.permission" placeholder="请输入..." clearable style="width:90%"/>&ndash;&gt;-->
<!--          <CheckboxGroup v-model="modal.form.permission">-->
<!--            <Checkbox label="create" border><Tag color="primary">C</Tag></Checkbox>-->
<!--            <Checkbox label="update" border><Tag color="warning">U</Tag></Checkbox>-->
<!--            <Checkbox label="search" border><Tag color="success">R</Tag></Checkbox>-->
<!--            <Checkbox label="delete" border><Tag color="error">D</Tag></Checkbox>-->
<!--          </CheckboxGroup>-->
<!--        </FormItem>-->
        <FormItem label="type" prop="type">
<!--          <Input v-model="modal.form.type" placeholder="请输入..." clearable style="width:90%"/>-->
          <RadioGroup v-model="modal.form.type">
            <Radio label="menu" border>
              <Icon type="ios-menu"></Icon>
              <span>菜单</span></Radio>
            <Radio label="button" border>
              <Icon type="md-albums"></Icon>
              <span>按钮</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="baseMenu" prop="baseMenu">
          <Input v-model="modal.form.baseMenu" placeholder="请输入..." clearable style="width:90%"/>
        </FormItem>
        <FormItem label="color" prop="color">
          <ColorPicker v-model="modal.form.color" /> {{ modal.form.color }}
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelForm">取消</Button>
        <Button type="primary" @click="submitForm" :loading="false">确定</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import API from '@/libs/api'
import VmBtable from '@/components/vm/vm-btable'

export default {
  components: {
    VmBtable
  },
  data () {
    return {
      apiUrl: 'SysMenu',
      replaceWord: '',
      showIndex: null,
      searchParam: {
        current: 1,
        size: 20,
        total: 0
      },
      operate: [],
      dataTable: [],
      modal: {
        title: '',
        visible: false,
        rules: {},
        form: {
          id: '',
          color: '',
          parentId: ''
        }
      },
      dataColumns: [
        // { type: 'selection', width: 60, align: 'center' },
        // { title: '序号', type: 'index', align: 'center', width: 100, },
        // { title: 'id', align: 'center', key: 'id', },
        { title: '名称', align: 'left', key: 'title', tree: true },
        { title: '路径', align: 'left', key: 'path' },
        { title: '图标',
          align: 'left',
          key: 'icon',
          render: (h, params) => {
            const row = params.row
            return h('div', [h('Icon', { props: { type: row.icon, color: row.color, size: 30 } }), row.icon])
          } },
        // { title: 'level', align: 'center', key: 'level', },
        // { title: 'parentId', align: 'center', key: 'parentId', },
        { title: '排序', align: 'center', key: 'ord' },
        { title: '是否展开',
          align: 'center',
          key: 'fixed',
          render: (h, params) => {
            const row = params.row
            return h('Tag', { props: { color: row.fixed === 0 ? 'warning' : 'cyan' } }, row.fixed === 0 ? '常态展开' : '常态闭合')
          } },
        // { title: '权限', align: 'center', key: 'permission', width:180,
        //   render: (h, params) => {
        //     const row = params.row
        //     let tags = []
        //     if (row.permission.includes('create') > 0) {
        //       tags.push(h('Tag', { props: { color: 'primary' } }, 'C'))
        //     }
        //     if (row.permission.includes('update') > 0) {
        //       tags.push(h('Tag', { props: { color: 'warning' } }, 'U'))
        //     }
        //     if (row.permission.includes('search') > 0) {
        //       tags.push(h('Tag', { props: { color: 'success' } }, 'C'))
        //     }
        //     if (row.permission.includes('delete') > 0) {
        //       tags.push(h('Tag', { props: { color: 'error' } }, 'C'))
        //     }
        //     return h('div', tags)
        //   }
        //   },
        { title: '类型',
          align: 'left',
          key: 'type',
          render: (h, params) => {
            const row = params.row
            return h('div', [h('Icon', { props: { type: row.type === 'menu' ? 'ios-menu' : 'md-albums', color: row.color, size: 20 } }), row.type])
          }
        },
        // { title: 'baseMenu', align: 'center', key: 'baseMenu', },
        { title: '颜色',
          align: 'center',
          key: 'color',
          render: (h, params) => {
            const row = params.row
            return h('Tag', { props: { color: row.color } }, row.color ? row.color : 'default')
          }
        },
        {
          title: '操作',
          type: 'operation',
          align: 'center',
          width: 180,
          render: (h, param) => {
            let btn = []
            let addchild = h('Icon', {
              props: { type: 'md-add', size: '24' },
              style: { color: '#2db7f5', cursor: 'pointer', marginRight: '10px' },
              on: { click: () => this.addChild(param.row) }
            })
            let edit = h('Icon', {
              props: { type: 'md-create', size: '24' },
              style: { color: 'blur', cursor: 'pointer', marginRight: '10px' },
              on: { click: () => this.editModal(param.row) }
            })
            let delBtn = h('Icon', {
              props: { type: 'ios-trash-outline', size: '24' },
              style: { color: 'red', cursor: 'pointer', marginLeft: '5px' },
              on: { click: () => this.delModal(param.row) }
            })
            addchild = h('Tooltip', { props: { placement: 'top', content: '增加下级菜单' } }, [addchild])
            btn.push(addchild, edit, delBtn)
            return h('div', btn)
          }
        }
      ]
    }
  },
  methods: {
    restFn () {
      this.searchParam.current = 1
      this.searchParam.size = 20
      this.queryFn()
    },
    onExpandTree (rowKey, status) {
      this.showIndex = this.dataTable.findIndex(item => item.id === rowKey)
    },
    queryFn () {
      API.fetch(this.apiUrl + '/getTree', this.searchParam).then(
        res => {
          let data = res.data
          if (this.showIndex != null) {
            Object.assign(data[this.showIndex], { _showChildren: true })
          }
          this.dataTable = data
          this.searchParam.total = data.total
        },
        error => {
          this.$Message.info(error.msg)
        }
      )
    },
    addChild (row) {
      this.showIndex = row._index
      let assign = Object.assign({
        parentId: row.id
      })
      API.post(this.apiUrl, assign).then(
        res => {
          this.queryFn()
          this.$refs.modalForm.resetFields()
          this.modal.form.id = ''
        },
        error => this.$Message.info(error.msg)
      )
    },
    addModal () {
      this.modal.form.id = ''
      Object.assign(this.modal, {
        title: '添加',
        visible: true,
        form: this.modal.form
      })
    },
    editModal (row) {
      Object.assign(this.modal, {
        title: '编辑',
        visible: true
      })
      Object.assign(this.modal.form, row)
    },
    submitForm () {
      this.$refs.modalForm.validate(valid => {
        if (valid) {
          if (this.modal.form.id) {
            API.put(this.apiUrl, this.modal.form).then(
              res => {
                this.modal.visible = false
                this.queryFn()
                this.$refs.modalForm.resetFields()
                this.modal.form.id = ''
              },
              error => this.$Message.info(error.msg)
            )
          } else {
            API.post(this.apiUrl, this.modal.form).then(
              res => {
                this.modal.visible = false
                this.queryFn()
                this.$refs.modalForm.resetFields()
                this.modal.form.id = ''
              },
              error => this.$Message.info(error.msg)
            )
          }
        } else {
          return false
        }
      })
    },
    cancelForm () {
      this.modal.visible = false
      if (this.modal.form.id) {
        this.$refs.modalForm.resetFields()
      }
    },
    delModal (row) {
      API.del(this.apiUrl, row.id).then(res => {
        this.queryFn()
      },
      error => this.$Message.info(error.msg))
      this.showIndex = row._index
    },
    batchDelete () {

    },
    pageChangeFn (current) {
      this.searchParam.current = current
      this.queryFn()
    },
    searchFn (value) {
      this.queryFn()
    }
  },
  created () {
  },
  mounted () {
    this.queryFn()
  }
}
</script>
<style scoped>
</style>
